<template>
  <div class="container">
    <p class="titlep" >
      <svg-icon class="logo" icon-class="logo" />
      <!-- <img src="https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png" alt=""> -->
      <span>{{ platformName }}</span>
    </p>
    <div class="topbox">
      <img style="width:100%" src="../../assets/img_top.png" alt="">
    </div>
    <div class="centerbox">
      <div class="l-box">
        <!-- <p v-if="license.status == 1"><span>当前状态</span><span style="color: #2d9f0a">{{ license.status | statusNameFilter }}</span></p>
        <p v-if="license.status == 0"><span>当前状态</span><span style="color: red">{{ license.status | statusNameFilter }}</span></p> -->
        <p v-if="license.authCode"><span>当前状态</span><span style="color: #2d9f0a">已授权</span></p>
        <p v-else><span>当前状态</span><span style="color: red">未授权</span></p>
        <p><span>机器码</span><span>{{ macCode }}</span></p>
        <p class="line" />
        <p><span>授权码</span><span>{{ license.authCode }}</span></p>
        <p><span>开始日期</span><span>{{ license.start }}</span></p>
        <p><span>有效期</span><span>{{ license.valid == '0' ? '长期有效': license.valid }}</span></p>
        <!-- <p v-if="license.valid != '0'"><span>过期日期</span><span>{{ license.end }}</span></p> -->
      </div>
      <div class="r-box">
        <div class="title">授权认证</div>
        <div class="uploadbox">
          <span class="t2">上传授权文件进行鉴权 </span>
          <!-- <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="1"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload> -->
          <el-form ref="elForm" :model="formData" size="medium">
            <el-form-item label="" prop="field101">
              <authUpload ref="dtImportFileRef" />
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" class="surejq" size="small"
                         @click="submitForm">确定鉴权</el-button>
              <!-- <el-button @click="resetForm">重置</el-button> -->
            </el-form-item>
          </el-form>

        </div>
        <!-- <el-button
          class="surejq"
          size="small"
          type="primary"
        >确定鉴权</el-button> -->
      </div>
      <div class="to-login">
        <el-button type="primary" @click="toLogin">登录</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import { getMachineCode, authenticationInfo } from '@/framework/api/authentication'
// import { cloud } from '@/framework/utils/request'
import authUpload from './components/authUpload/index'

const statusNameOptions = [
  { key: '1', status_name: '已授权' },
  { key: '0', status_name: '未授权' }
]

const calendarStatusKeyValue = statusNameOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.status_name
  return acc
}, {})

export default {
  name: 'Authentication',
  filters: {
    statusNameFilter(status) {
      return calendarStatusKeyValue[status]
    }
  },
  components: { authUpload },
  data() {
    return {
      macCode: '5E:38:CB:30:7C:A6',
      license: {
        status: 0,
        authCode: '',
        start: '',
        valid: '',
        end: ''
      },
      fileList: [
        // {
        //   name: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
      ],
      formData: {
        field101: null
      },
      rules: {}

    }
  },
  computed: {
    platformName() {
      return this.$store.state.settings.platformName
    }
  },
  created() {
    // this.getInfo()
    // this.$message({
    //   // title: '成功',
    //   message: '授权已过期，请重新授权',
    //   type: 'error',
    //   duration: 2000
    // })
    this.getMachineCode()
  },
  mounted() {
    this.$nextTick(() => {
      // this.$refs.field101.uploadFileUrl = process.env.VUE_APP_BASE_API + cloud.file + '/authentication/info'
      // this.$refs.field101.paramsData.secretFlag = null
      // delete this.$refs.field101.paramsData.secretFlag
    })
  },
  methods: {
    getMachineCode() {
      getMachineCode().then((res) => {
        this.macCode = res.data
      })
    },
    toLogin() {
      // this.$store.dispatch('user/resetToken').then(() => {
      // location.reload()
      // })
      if (this.license.authCode) {
        this.$router.push('/login')
      } else {
        this.$dtMessage({
          message: '请进行鉴权',
          type: 'error'
        })
      }
    },
    // submitForm() {
    //   this.$refs['elForm'].validate(valid => {
    //     // if (!valid) return
    //     // TODO 提交表单
    //     authenticationInfo().then(res => {
    //     })
    //   })

    // },
    // 导入数据
    submitForm() {
      const file = this.$refs.dtImportFileRef.fileList
      if (file.length === 0) {
        this.$dtMessage({
          title: '失败',
          message: '请选择需要上传的文件',
          type: 'error',
          duration: 2000
        })
        return
      }
      const formData = new FormData()
      // 数据
      formData.append('file', file[0].raw)
      // formData.append('name', file[0].name)
      // formData.append('yesOrNotCovered', this.yesOrNotCovered)
      authenticationInfo(formData).then(async (res) => {
        if (res.data && res.data.authCode) {
          this.license = res.data
          this.$dtMessage({
            message: '鉴权成功',
            type: 'success'
          })
        } else {
          this.$dtMessage({
            message: '鉴权失败',
            type: 'error'
          })
        }
        this.onFoldAll()
        this.getList()
        await this.$nextTick()
        document.getElementById('messageBtn').onclick = function () {
          window.location.href = res.data.errorDownloadPath
        }
      }).catch((res) => {
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    }

    // getInfo() {
    //   getAuthentication().then((res) => {
    //     this.license = res.data
    //   })
    // },
    // handleRemove(file, fileList) {
    // },
    // beforeRemove(file, fileList) {
    //   return this.$confirm(`确定移除 ${file.name}？`)
    // }
  }
}
</script>
<style lang="scss" scoped>
.titlep {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  .logo {
    width: 50px !important;
    height: auto !important;
    max-height: 50px !important;
    margin-right: 10px;
  }
  span {
    font-size: 22px;
    font-family: Segoe UI;
    font-weight: 600;
    line-height: 0px;
    color: #ffffff;
    opacity: 1;
  }
}
.topbox {
  z-index: 1;
  img {
    z-index: 2;
  }
}
.centerbox {
  position: fixed;
  top: 30%;
  left: 20%;
  width: 60%;
  // height: 703px;
  background: #ffffff;
  box-shadow: 0px 10px 30px rgba(111, 141, 216, 0.1);
  opacity: 1;
  border-radius: 4px;
  margin: -100px auto;
  z-index: 9;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 60px;
  .l-box {
    width:48%;
    // height: 382px;
    padding: 30px 40px;
    background: #fafafa;
    p {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      height: 35px;
      line-height: 35px;
      span:nth-of-type(1) {
        font-size: 14px;
        color: #999999;
      }
      span:nth-of-type(2) {
        font-size: 14px;
        color: #333333;
      }
    }
    .line {
      height: 1px;
      border-bottom: 1px solid rgba(223, 220, 220, 0.5);
    }
  }

  .r-box {
    width: 48%;
    // height: 382px;
    padding: 40px 30px;
    background: #fafafa;
    .title {
      text-align: center;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 50px;
      color: #333333;
      opacity: 1;
    }
    .uploadbox {
      margin-top: 30px;
      // display: flex;
      // justify-content: space-between;
      // align-items: flex-start;
    }
    .t2 {
      display: inline-block;
      width: 140px;
      height: 19px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 28px;
      color: #999999;
      opacity: 1;
    }
    .upload-demo {
      margin-top: 20px;
    }
    .surejq {
      display: block;
      margin: 50px auto;
    }
  }
  .to-login{
    position: absolute;
    bottom: 10px;
  }
}
</style>
<style lang="scss">
.formbox .el-input--medium .el-input__inner {
  height: 50px;
  line-height: 50px;
}
</style>
